<template>
  <div>
    <el-dialog title="修改页面" :visible.sync="showEditAgreementPageDialog" center width="770px">
      <el-form :model="pageData" ref="pageData" :rules="rules">


        <el-form-item label="页面标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="pageData.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="页面内容" :label-width="formLabelWidth">
          <el-switch
            v-model="isImage"
            active-color="#409EFF"
            inactive-color="#409EFF"
            active-text="图片"
            inactive-text="文本">
          </el-switch>
        </el-form-item>

        <el-form-item label="文本" v-if="!isImage" :label-width="formLabelWidth">
          <el-input v-model="templateTitle" autocomplete="off"></el-input>
          <el-button size="mini" type="primary" @click="submitText">提交文本</el-button>
        </el-form-item>

        <el-form-item label="图片" v-else :label-width="formLabelWidth">
          <div class="upload_head_img">
            <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_picture" class="avatar-uploader" action="">
              <i class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="已上传内容" :label-width="formLabelWidth">
          <template v-for="item in pageData.content">

            <p v-if="item.type === 'text'">{{item.value}}</p>

            <img v-if="item.type ==='image'" :src="item.value" alt="">

          </template>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSubmit()">取 消</el-button>
        <el-button type="primary" @click="submitPage('pageData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {edit} from '@/api/thk/cms/page'
  import { client } from '@/utils/alioss'

  export default {
    name: 'editAgreementPage',

    data() {
      return {
        showEditAgreementPageDialog: false,
        formLabelWidth: '130px',
        templateTitle: '',
        isImage:true,
        pageData: {
          page_id: '',
          type: '',
          title: '',
          content: [],
        },

        rules: {
          title:[
            { required: true, message: '问题为必填项', trigger: 'blur' },
          ],
        }

      }
    },

    methods: {
      submitPage(pageData){
        this.$refs[pageData].validate((valid) => {
          if (valid) {
            this.pageData.content =   JSON.stringify(this.pageData.content)
            edit(store.getters.token,this.pageData).then(result => {
              this.showEditPageDialog = !this.showEditPageDialog
              this.$message.success("修改成功!")
              this.$parent.getPageList()
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      showEditDialog(row){
        this.pageData.page_id = row.page_id
        this.pageData.title = row.title
        this.pageData.content = row.content
        // this.pageData.content =JSON.parse(row.content)
        // console.log('>>> content', this.pageData.content)
        this.pageData.type = row.type

        this.showEditPageDialog = !this.showEditPageDialog

      },

      cancelSubmit(){
        this.showEditPageDialog = !this.showEditPageDialog
      },

      submitText(){
        let data = {
          type: 'text',
          value: ''
        }
        data.value = this.templateTitle
        this.pageData.content.push(data)
        this.templateTitle = ''
        console.log(this.pageData.content)
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture(file){
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid

        let data = {
          type: 'image',
          value: '',
        }

        client().put(fileName, file.file).then((res) => {
          data.value = res.url
          that.pageData.content.push(data)
          console.log(that.pageData.content);
          that.$message.success('图片地址上传成功！')
        }).catch((err) => {
          that.$message.error('图片地址上传失败，原因：' + err)
        })
      },


    }
  }
</script>

<style>
  /* 图片上传的样式 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }

  /* 头像地址(head_img)图片上传组件的尺寸 */
  .upload_head_img .avatar-uploader .el-upload{
  }
  .upload_head_img .avatar-uploader-icon{
    font-size: 28px;
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  .upload_head_img .avatar{
    width: 80px;
    height: 80px;
  }

  img{
    width: 80px;
    height: 80px;
  }

  p{
    margin: 0;
    padding: 0 5px;
  }
</style>
